<!-- 报修记录 -->
<template>
  <div class="record-container">
    <radio :selected="radioRef" @headleRadio="headleRadio" ></radio>
    <div class="main">
      <KeepAlive>
        <component :is="viewRef" :MainRecords="RecordDataRef"></component>
      </KeepAlive>
    </div>
    <div class="pagin">
      <paging :total="totalRef" :limit="4" @click="headlePageing" :page="pageRef"></paging>
    </div>
  </div>
</template>

<script setup>
import { getMainRecords } from "@/api/user.js";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import { ref, shallowRef, watchEffect } from "vue";
import radio from "./radio.vue";
import complete from "./complete.vue";
import noComplete from "./noComplete.vue";
import paging from "@/components/paging/index.vue"
const { readUserInfo } = storeToRefs(useUserStore());
const RecordDataRef = ref([]); // 远程数据
const totalRef = ref(0); // 总条数
const radioRef = ref(1); // 单选
const pageRef = ref(1); // 页码
const viewRef = shallowRef(); // 显示的组件
watchEffect(()=>{
  if(radioRef.value === 1){
    viewRef.value = complete
  } else if(radioRef.value === 2){
    viewRef.value = noComplete
  }
})
watchEffect(async () => {
  const { data } = await getMainRecords({
    startTime: "",
    endTime: "",
    dormitroyId: [readUserInfo.value.dormitoryId],
    floorId: readUserInfo.value.floorID,
    isHandle: radioRef.value,
    roomId: readUserInfo.value.roomNoId,
    page: pageRef.value,
    limit: 4,
  });
  RecordDataRef.value = data.rows;
  totalRef.value = data.count;
});

const headleRadio = (value) => {
  pageRef.value = 1;
  radioRef.value = value;
};

const headlePageing = (data) => {
  pageRef.value = data
}
</script>

<style lang="less" scoped>
.record-container {
  width: 100%;
  height: 100%;
  
  .main {
    margin-top: 10px;
  }
  .pagin{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    
  }
}
</style>